<template>
	<view class="s-collapse-item">
		<view class="s-collapse-item__title" @click="collapseItemClicked">
			<view class="s-collapse-item__title__text">{{title}}</view>
			<view class="s-collapse-item__title__icon" :animation="animationDataIcon"/>
		</view>
		<view ref="itemContent" class="s-collapse-item__content s-collapse-item__expanded" v-if="expanded">
		<slot />
		</view>
		<view ref="itemContent" class="s-collapse-item__content s-collapse-item__collapsed" v-else>
		<slot />
		</view>
	</view>
</template>

<script>
	import props from './props.js';
	export default {
		name: "s-collapse-item",
		mixins: [props],
		data() {
			return {
				// 是否展开状态
				expanded: false,
				animationDataIcon:{},
			};
		},
		created(){
		    const animation = uni.createAnimation({
		      duration: 500,
		        timingFunction: 'ease',
		    })
		
		    this.animation = animation
		},
		methods: {
			collapseItemClicked(){
				this.expanded = !this.expanded
				this.iconAnimate()
				if(this.expanded) {
					this.$parent.$parent.onChange(this)
				} else {
					this.$parent.$parent.onChange(this)
				}
			},
			iconAnimate() {
				const angle = this.expanded ? 135: -45
				this.animation.rotate(angle).step()
				this.animationDataIcon = this.animation.export()
			}
		},
		computed: {
			contentClass() {
				return this.expanded ? `s-collapse-item__expanded` : `s-collapse-item__collapsed`
			}
		}
	};
</script>

<style lang="scss" scoped>
	.s-collapse-item {
		box-sizing: border-box;
		&__title {
			display: flex;
			flex-direction: row;
			box-sizing: border-box;
			padding: 10px 15px;
			font-size: 15px;
			color: #303133;
			justify-content: space-between;
			align-items: center;
			&__text {}
			&__icon {
				display: inline-block;
				width:16rpx;
				height: 16rpx;
				border-left: 4rpx solid #303133;
				border-bottom: 4rpx solid #303133;
				transform: rotate(-45deg);
			}
		}
		&__content {
			padding: 10px 15px;
		}
		&__expanded {
			
		}
		&__collapsed {
			display: none;
		}
	}
</style>
